<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="contain">
<!--        顶部固定-->
        <div class="topMask">

        </div>
<!--        顶部导航栏-->
        <div class="topNav">
<!--            左侧用户信息-->
            <div class="leftInfo">

            </div>
<!--            右侧功能导航-->
            <div class="rightTools">

            </div>
        </div>
<!--        主要内容区域-->
        <div class="mainBox">
            <div class="topSearch">
                <input class="inp" type="text" placeholder="base">
            </div>

<!--            正常整齐的布局-->
<!--            <div class="products">-->
<!--                <div class="item">-->
<!--                </div>-->
<!--            </div>-->

<!--            瀑布流布局-->
            <div class="products">
                <div class="box leftBox">

                </div>
                <div class="box middleBox">

                </div>
                <div class="box rightBox">

                </div>
            </div>
        </div>
    </div>

</body>
<script>
    const topMask = document.querySelector('.topMask');
    window.addEventListener('scroll',()=>{
        if(window.scrollY>0){
            topMask.style.display = 'block';
        }else {
            topMask.style.display = 'none';
        }
    });
    //定时切换输入框提示信息功能
    const inp = document.querySelector('.inp');
    const placeholders = ['123','456','789'];
    let i = 0;
    setInterval(()=>{
        inp.attributes.placeholder.nodeValue = placeholders[i % placeholders.length];
        i++;
    },5000);

    //瀑布流布局6
    const leftBox = document.querySelector('.leftBox');
    const middleBox = document.querySelector('.middleBox');
    const rightBox = document.querySelector('.rightBox');
    let containArr = [leftBox,middleBox,rightBox];
    const classArr = ['itemOne','itemTwo','itemThree'];
    for (let j = 0; j < 20; j++) {
        const randomNum = Math.floor(Math.random() * 3);
        const item = document.createElement('div');
        item.classList.add(classArr[randomNum],'item');
        const arr = [leftBox.offsetHeight,middleBox.offsetHeight,rightBox.offsetHeight];
        // 找到最小值
        const minValue = Math.min(...arr);
        // 找到最小值的索引
        const minIndex = arr.indexOf(minValue);
        containArr[minIndex].innerHTML += item.outerHTML;
    }


</script>
</html>